<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            text-decoration: none;
        }

        /* 未访问链接
        a:link {
            color: blue;
        }

        /* 已访问链接 
        a:visited {
            color: purple;
        }

        /* 鼠标点击中
        a:nth-child(2):active {
            color: yellowgreen;
        } */

        input:focus {
            border: 2px solid blue;
            outline: none;
            /* 移除默认轮廓并用蓝色边框代替 */
        }

        section:target {
            background-color: lightblue;
        }

        #check-all:indeterminate {
            background-color: lightgray;
        }

        /* 权重最低 */
        :where(.class1, .class2) {
            color: black;
        }

        p::first-line {
            font-size: 1.2rem;
            font-weight: bold;
            text-decoration: underline;
        }
    </style>
</head>

<body>

    <p>
        In warm ocean waters around the world, you may see a strange sight: A fish leaping from the water and soaring
        dozens
        of meters before returning to the ocean's depths. Early Mediterranean sailors thought these flying fish returned
        to
        the shore at night to sleep, and therefore called this family of marine fish Exocoetidae.
    </p>

    <div><a href="" class="class1">nihao</a> </div>
    <div><a href="" class="class2">nizuiha</a> </div>

    <a href="">点击</a>
    <a href="#">点我</a>
    <input type="text">
    <nav>
        <ul>
            <li><a href="#section1">第1节</a></li>
            <li><a href="#section2">第2节</a></li>
            <li><a href="#section3">第3节</a></li>
        </ul>
    </nav>

    <section id="section1">...</section>
    <section id="section2">...</section>
    <section id="section3">...</section>

    <input type="checkbox" id="check-all">
    <label for="check-all">全选/全不选</label>
</body>

</html>